// 横向条形图
import styles from "./HorizontalBarChart.module.scss"
import React from "react";
import { useState } from "react";
import { useEffect } from "react";
import Loading from "@/component/loading/loading";
import { useRef } from "react";
import Zempty from "@/component/zc-empty/zc-empty";
import { Tooltip } from "antd";
import { QuestionCircleOutlined } from '@ant-design/icons';
const HorizontalBarChart = ({
    tooltips = true,//tooltips默认显示
    fieldNames = { name: "", nameAll: false, value: "" },//提示条后面要加的内容
    unit = null,//单位
    message,
    keyWord = [],
    loading = false,
    sort,// up的时候升级，dn的时候降序
    heightAuto = false,//高度自适应？
    valueType = "",//值是否显示百分比？
    chartBorderRadius = true,//图形是直角边还是圆角边
    overFlow = true,//默认内容允许滚动
    hideTitle = false,//隐藏标题
    titleCenter = false,//标题居中
    transparent,//背景透明
    hideHeader = false,//隐藏卡片header头
    title = "HorizontalBarChart",//卡片标题
    style = { height: null },//样式
    hideBtn = false,//隐藏切换按钮
    hideDownBtn = true,//隐藏下载按钮
    btn = [],//按钮名称
    data = [

    ],//数据
    toFixed = false,//横条是否显示保留2位小数
    titleTips = "显示下列各项占比，鼠标移动到色彩条上可查看具体值"
}) => {
    const [current, setCurrent] = useState(0);
    const [list, setList] = useState([]);
    useEffect(() => {
        if (data.length > 0) {
            setList(data[current].data)
        }

        // console.log("打印下数据：", data[current].data)
    }, [data, current])

    // 降序
    const Descending = (state, key) => {
        return state.sort(function (a, b) {
            var y = Number(a[key]);//如果要从大到小,把x,y互换就好
            var x = Number(b[key]);
            return ((x < y) ? -1 : ((x > y) ? 1 : 0));
        });
    }
    // 升序
    const Ascending = (state, key) => {
        return state.sort(function (a, b) {
            var x = Number(a[key]);//如果要从大到小,把x,y互换就好
            var y = Number(b[key]);
            return ((x < y) ? -1 : ((x > y) ? 1 : 0));
        });
    }
    const [state, setState] = useState([])
    // useEffect监听state，
    useEffect(() => {
        switch (sort) {
            case "up": console.log("升序"); setState(Descending(list, 'value')); break;
            case "dn": console.log("降序"); setState(Ascending(list, 'value')); break;
            default: setState(list)
        }
    }, [list, sort])




    // 下载弹框的控制
    const onRef = useRef(null)

    const downClick = () => {
        console.log("当前可用的数据：", data, btn,)
        onRef.current.setOpen(true)
    }



    return (
        <>
            <div className={styles.card} style={{ ...style, backgroundColor: transparent ? "rgba(0,0,0,0)" : null, height: heightAuto ? "auto" : style.height ? style.height : null }}>
                <Loading loading={loading} >
                    <div className={styles.card_center}>

                        {
                            hideHeader ? null :
                                <div className={styles.card_header}>
                                    <div className={styles.header_title} style={{ textAlign: titleCenter ? "center" : null }}>
                                        <span className={styles.title_word}>{title = hideTitle ? "" : title}<span className={styles.head_unit}>{unit ? `（单位：${unit}）` : null}</span></span>
                                        <Tooltip title={titleTips}>
                                            <QuestionCircleOutlined />
                                        </Tooltip>
                                    </div>
                                    <div className={styles.header_btn}>

                                        {
                                            btn.map((item, index) => {
                                                if (hideBtn) {
                                                    return false;
                                                } else {
                                                    return (
                                                        <span onClick={() => setCurrent(index)} className={styles.header_btn_item} key={index} style={{ backgroundColor: current === index ? "dodgerblue" : "" }}>{item}</span>
                                                    )
                                                }

                                            })
                                        }
                                        {
                                            hideDownBtn ? null : <span className={styles.header_btn_item} onClick={() => downClick()}>下载</span>
                                        }
                                    </div>
                                </div>
                        }
                        <div className={styles.card_info} style={{ overflow: overFlow ? "auto" : "hidden" }}>
                            <Zempty show={(loading === false && list.length === 0) ? true : false} message={message} />
                            {
                                state.map((item, index) => {
                                    return (
                                        <div className={styles.item} key={index}>
                                            <div className={styles.item_center}>
                                                <div className={styles.header}>{item.name}</div>
                                                <div className={styles.center}>
                                                    {
                                                        tooltips ? <Tooltip title={`${fieldNames.nameAll ? fieldNames.name : (item.name + fieldNames.name)}：${toFixed ? Number(item.statValue).toFixed(2) : item.statValue}${fieldNames.value}`}>
                                                            <div className={styles.progress} style={{ borderRadius: chartBorderRadius ? "15px 15px 15px 15px" : "0 0 0 0 " }}>
                                                                <div className={styles.finish} style={{ borderRadius: chartBorderRadius ? "15px 15px 15px 15px" : "0 0 0 0 ", width: item.value }}></div>
                                                            </div>
                                                        </Tooltip>
                                                            : <div className={styles.progress} style={{ borderRadius: chartBorderRadius ? "15px 15px 15px 15px" : "0 0 0 0 " }}>
                                                                <div className={styles.finish} style={{ borderRadius: chartBorderRadius ? "15px 15px 15px 15px" : "0 0 0 0 ", width: item.value }}></div>
                                                            </div>
                                                    }


                                                    <div className={styles.value}>{valueType === "int" ? item.value : item.value}</div>
                                                </div>
                                            </div>
                                        </div>
                                    )
                                })
                            }
                        </div>

                    </div>
                </Loading>
            </div >
        </>


    )
}
export default HorizontalBarChart;